.ChatPanel {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  display: none;
  > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  &-loading > div {
    align-items: center;
  }

  &-active,
  &-loading,
  &-inbox {
    z-index: 10;
    display: block;
  }
  &-close {
    // display: none !important;
    transform: translateY(800px);
    opacity: 0 !important;
  }
  &-inbox-close {
    position: absolute;
    right: 12px;
    top: 16px;
    font-size: 19px;
    cursor: pointer;
    z-index: 1;
    &:not(:hover) {
      color: #9e9e9e !important;
    }
  }
  &-error {
    font-size: 14px;
  }

  &-body {
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: row;
  }

  &-wrapper {
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    z-index: 16;
    opacity: 1;
    // transition: right 0.3s;
    transition: all 0.3s;
    // transform: translateX(0px);
  }

  &-position {
    position: fixed;
    right: 240px;
    bottom: 10px;
    width: 800px;
    height: 600px;
  }

  &-up {
    // transform: translateX(160px);
    right: 76px !important;
  }
  /* 兼容小屏幕 */
  &-small {
    height: 550px !important;
    .ChatPanel-sessionList {
      height: 420px !important;
    }
  }
  &-big {
    width: 1100px;
    height: 800px;
    .ChatPanel-sessionList {
      height: 670px;
    }
    .ChatPanel-sessionInfo {
      width: 350px;
      >div {
        width: 350px;
      }
    }
    .ChatPanel-File-item .creator {
      width: 100px;
    }
  }

  &-window .ChatPanel {
    overflow: hidden;
    display: block;
  }

  @import '../ChatPanelHeader/index.less';
  @import '../ChatPanelSession/index.less';
  @import '../ChatPanelSessionInfo/index.less';
}
